<template>
    <div>
        <Modal v-model="showAdd" @on-ok="save" ok-text="保存" :closable='false' :mask-closable=true :width="600">
            <h3 slot="header" style="color:#2D8CF0">请填写家族史情况</h3>
            <Row>
                <Col span="22" offset="1">
                    <Form :model="formItem" label-position="top">
                        <FormItem label="家中有类似患者吗">
                            <RadioGroup v-model="formItem.isHavePatients">
                                <Radio label="0">
                                    <span>没有</span>
                                </Radio>
                                <Radio label="1">
                                    <span>是</span>
                                </Radio>
                            </RadioGroup>
                            <Input v-model="formItem.patientsDetails" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="如果是请填写详细情况..."></Input>
                        </FormItem>
                        <FormItem label="家族中有先天性或遗传性疾病吗">
                            <RadioGroup v-model="formItem.isHaveDisease">
                                <Radio label="0">
                                    <span>没有</span>
                                </Radio>
                                <Radio label="1">
                                    <span>是</span>
                                </Radio>
                            </RadioGroup>
                            <Input v-model="formItem.diseaseDetails" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="如果是请填写详细情况..."></Input>
                        </FormItem>
                        <FormItem label="家族中有特殊的病历吗">
                            <RadioGroup v-model="formItem.isHaveSpecialMedical">
                                <Radio label="0">
                                    <span>没有</span>
                                </Radio>
                                <Radio label="1">
                                    <span>是</span>
                                </Radio>
                            </RadioGroup>
                            <Input v-model="formItem.specialMedicalDetails" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="如果是请填写详细情况..."></Input>
                        </FormItem>
                        <FormItem label="其他：">
                            <Input v-model="formItem.otherDetails" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容..."></Input>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <iview-button
                :menuId="menuId"
                v-on="{events:events}">
        </iview-button>
        <Card v-for="(item,index) in data" :key="index" style="margin-top: 10px">
            <P>调查时间：{{item.creationTime | YMDDateFormatter}}</P>
            <Row>
                <Col span="10">
                    <p>家中有类似患者吗</p>
                </Col>
                <Col span="4">
                    <Tag v-if="item.isHavePatients === 0" checkable color="green">没有</Tag>
                    <Tag v-if="item.isHavePatients === 1" checkable color="red">是</Tag>
                </Col>
                <Col span="10">
                    <p v-if="item.isHaveSpecialMedical === 1">详细情况：{{item.patientsDetails}}</p>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <p>家族中有先天性或遗传性疾病吗</p>
                </Col>
                <Col span="4">
                    <Tag v-if="item.isHaveDisease === 0" checkable color="green">没有</Tag>
                    <Tag v-if="item.isHaveDisease === 1" checkable color="red">是</Tag>
                </Col>
                <Col span="10">
                    <p v-if="item.isHaveSpecialMedical === 1">详细情况：{{item.diseaseDetails}}</p>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <p>家族中有特殊的病历吗</p>
                </Col>
                <Col span="4">
                    <Tag v-if="item.isHaveSpecialMedical === 0" checkable color="green">没有</Tag>
                    <Tag v-if="item.isHaveSpecialMedical === 1" checkable color="red">是</Tag>
                </Col>
                <Col span="10">
                    <p v-if="item.isHaveSpecialMedical === 1">详细情况：{{item.specialMedicalDetails}}</p>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <p>其他：{{item.otherDetails}}</p>
                </Col>
            </Row>
            <p align="right">
                <ButtonGroup>
                    <Button type="primary">
                        编辑
                    </Button>
                    <Button type="error" @click="del(item)">
                        删除
                    </Button>
                </ButtonGroup>
            </p>
        </Card>
    </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewButton from '@/view/common/button/Button.vue';
    export default {
        components: {
            iviewTable,
            iviewButton
        },
        props: {
        },
        computed: {
        },
        filters: {
        },
        data () {
            return {
                menuId: 610,
                showAdd: false,
                baseURL: '/user/family',
                selectRow: {},
                selectRows: [],
                data: [],
                formItem: {
                    id: '',
                    patientId: '',
                    isHavePatients: '',
                    patientsDetails: '',
                    isHaveDisease: '',
                    diseaseDetails: '',
                    isHaveSpecialMedical: '',
                    specialMedicalDetails: '',
                    otherDetails: ''
                }
            };
        },
        methods: {
            events (item) {
                let path = item.path
                if (path === 'add') {
                    this.add()
                }
            },
            add () {
                this.formItem.id = ''
                this.$bus.init(this.formItem)
                this.showAdd = true
            },
            save () {
                this.formItem.patientId = this.$store.state.app.patientId
                let url = this.baseURL + '/saveOrUpdate'
                this.$ajax.post(url, this.formItem).then(r => {
                    let {code, msg} = r.data
                    if (code === 0) {
                        this.$bus.alert('success', '保存成功')
                        this.search()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            del (row) {
                this.$Modal.confirm({
                    title: '操作提示',
                    content: '<p>确认删除该条记录?</p>',
                    onOk: () => {
                        let ids = []
                        ids.push(row.id)
                        this.doDelete(ids)
                    }
                })
            },
            doDelete (ids) {
                let url = this.baseURL + '/delete'
                this.$ajax.post(url, ids).then(r => {
                    let {code, msg} = r.data
                    if (code === 0) {
                        this.$bus.alert('success', '删除成功')
                        this.search()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            refresh () {
                this.$refs.table.refresh()
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            search () {
                let url = this.baseURL + '/findByPatientId/' + this.$store.state.app.patientId
                this.$ajax.get(url).then(r => {
                    let {code, data, msg} = r.data
                    if (code === 0) {
                        this.data = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                this.search()
            }
        },
        mounted () {
            // this.init()
        }
    }
</script>

<style>

</style>
